<template>
	<view class="itemListContainer">
		<scroll-view scroll-y="true" class="scrollview"  :scroll-into-view="`album_item_${currentIndex}`" scroll-with-animation="true">
			<view class="album-item" :class="{'active':currentIndex==index}" :id="`album_item_${index}`" v-for="(item, index) in itemList" :key="index" @tap="change(item)">
				<!-- 针对学生端做特殊处理 -->
				<view v-if="spcOpt">
					<!-- 回放 -->
					<view v-if="appendStr == '1' && item.playListShow" class="row-item">
						<view class="imageContainer" v-if="!isLive">
							<image class="image" lazy-load="true" src="../../static/img/img_free.png" v-if="item.isFree" mode="widthFix"></image>
							<image class="image" lazy-load="true" src="../../static/img/img_vip.png" v-else mode="widthFix"></image>
						</view>
						<view class="imageContainer" v-else>
							<image class="image" lazy-load="true" src="../../static/img/Live_Review.svg" v-if="item.isReview" mode="widthFix"></image>
							<image class="image" lazy-load="true" src="../../static/img/Will_Live.svg" v-else mode="widthFix"></image>
						</view>
						<view class="title">{{ item.itemTitle }}</view>
					</view>
					<!-- 预习 -->
					<view v-if="appendStr == '2' && item.previewListShow" class="row-item">
						<view class="title">
							{{ item.itemTitle }}{{ appendVal(appendStr) }}
						</view>
					</view>
					<!-- 作业 -->
					<view v-if="appendStr == '3' && item.homeworkListShow" class="row-item">
						<view class="title">
							{{ item.itemTitle }}{{ appendVal(appendStr) }}
							<span>{{ `${item.canHomework?'(已布置)':''}` }}</span>
						</view>
					</view>
				</view>
				<view v-else class="row-item">
					<view class="imageContainer">
						<image class="image" lazy-load="true" src="../../static/img/img_free.png" v-if="item.isFree" mode="widthFix"></image>
						<image class="image" lazy-load="true" src="../../static/img/img_vip.png" v-else mode="widthFix"></image>
					</view>
					<view class="title normal">{{ item.itemTitle }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue';
export default {
	components: { faIcon },
	props: {
		itemList: {
			type: Array,
			default() {
				return [];
			}
		},
		isFree: {
			type: Boolean,
			default: false
		},
		currentIndex: {
			type: Number,
			default() {
				return 0;
			}
		},
		isPlaying:{
			type:Boolean,
			default:false
		},
		isLive:{
			type:Boolean,
			default:false
		},
		// 01: 回放 2: 预习 3: 作业
		appendStr: String,
		// 特殊处理
		spcOpt: Boolean
	},
	computed:{
		appendVal: function(){
			return function(e){
				switch (e){
					case '1':
						return ''
					case '2':
						return '预习'
					case '3':
						return '作业'
				}
			}
		}
	},
	methods: {
		change(e) {			
			this.$emit('change', this.itemList.indexOf(e));
		}
	}
};
</script>

<style lang="scss" scoped>
.itemListContainer {
	width: 100%;
	
	height: 100%;
	.scrollview{
		height: 100%;
	}
	.album-item {
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		max-height: 110rpx;
		line-height: 55rpx;
		padding: 5rpx 0;
		&.active{
			font-weight: 800;		
		}
		.row-item{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.imageContainer {
				flex-basis: 5%;
				flex-grow: 0;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				.image {
					width: 40rpx;
					height: 40rpx;
					// height: 100%;
				}
			}
			.title {
				box-sizing: border-box;
				font-size: 16px;
				padding: 5px;
				flex-basis: 100%;
				flex-grow: 0;
				flex-shrink: 0;
				overflow: hidden;
				text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
				display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
				-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-line-clamp: 2; /* 文本需要显示多少行 */
				&.normal{
					flex-basis: 98%
				}
			}
		}
	}
}
</style>
